<template>
  <div class="graph-wrapper">
    <RelationGraph
      ref="graphRef"
      :options="graphOptions"
      :on-node-click="onNodeClick"
      :on-line-click="onLineClick"
    >
      <template #node="{ node }">
        <div class="my-rg-node" :class="node.type == 'root' ? 'root' : ''">
          <div class="node-main">
            <div>{{ node.text }}</div>
            <div>{{ node.data.belongToDir }}</div>
          </div>
          <div class="node-divider"></div>
          <div class="node-bottom">
            <div class="type">{{ node.data.taskScheduleType == 'batch' ? '周期' : '实时' }}</div>
            <div class="circle">{{ getCycleLabel(node.data.dependCycle) }}</div>
          </div>
        </div>
      </template>
    </RelationGraph>
  </div>
</template>

<script>
// relation-graph也支持在main.js文件中使用Vue.use(RelationGraph);这样，你就不需要下面这一行代码来引入了。
import RelationGraph from "relation-graph";
import { getCycleLabel }from './util.js'
export default {
  name: "Demo",
  components: { RelationGraph },
  props: {
    data: { 
      type: Array, 
      default: ()=> {
        return [];
      } 
    }
  },
  data() {
    return {
      currentCase: "横向树状图谱",
      isShowCodePanel: false,
      graphOptions: {
        debug: false,
        layout:
          {
            layoutName: 'tree',
            from: 'top',
            max_per_width: 1000,
            min_per_width: 360,
            max_per_height: 500,
            min_per_height: 300,
          },
        defaultNodeShape:  1,
        defaultNodeWidth: 300,
        defaultNodeHeight: 160,
        defaultLineShape:  4,
        defaultJunctionPoint: 'tb',
        useAnimationWhenRefresh: true,
        defaultLineColor: '#3c9afb',
        disableNodeClickEffect: true,
        disableLineClickEffect: true,
        defaultNodeColor: 'white', 
      }
    };
  },
  mounted() {
    // this.resetGraph();
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler(newValue) {
        this.$nextTick(()=> {
          this.resetGraph(newValue)
        })
      },
    }
  },

  methods: {
    resetGraph(data) {
      if(!data || data.length == 0) {
        return;
      }
      this.$refs.graphRef.setOptions(this.graphOptions, (graphInstance) => {
        this.showGraph(data);
      });
    },
    getCycleLabel,
    showGraph(data) {
      let nodes = [];
      let lines = [];
      let rootData = data.find(item=> item.ba == '0');
      let root = {
        id: rootData.id + '',
        text: rootData.jobDesc,
        type: 'root',
        data: {...rootData},
      }
      data.map(item=> {
        if(item.ba != '0') {
          let node = {
            id: item.id + '',
            text: item.jobDesc,
            data: {...item},
          }
          nodes.push(node);
          let line = {
            from: `${item.ba == '1' ? item.id : root.id}`,
            to: `${item.ba == '1' ? root.id : item.id}`,
          }
          lines.push(line);
        }
      });
      const __graph_json_data = {
        rootId: "a",
        nodes: [
          root,
          // 根节点左侧的数据：
          ...nodes
        ],
        lines: lines
      };
      this.$refs.graphRef.setJsonData(__graph_json_data, (graphInstance) => {
        // 这些写上当图谱初始化完成后需要执行的代码
        console.log('refresh');
        this.$refs.graphRef.refresh();
      });
    },
    onNodeClick(nodeObject, $event) {
      console.log("onNodeClick:", nodeObject);
    },
    onLineClick(lineObject, linkObject, $event) {
      console.log("onLineClick:", lineObject);
    },
  },
};
</script>

<style lang="scss" scoped>
.graph-wrapper {
  height: 500px;
}

/deep/ .rel-node-peel-checked {
  border-radius: 10px;
}

.my-rg-node {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 10px 20px 0 20px;
  flex-direction: column;
  color: black;
  border: #3c9afb solid 1px;
  border-radius: 5px;
  .node-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .node-divider {
    margin: 8px 0;
    height: 1px;
    background-color: #3c9afb;
  }
  .node-bottom {
    height: 40px;
    display: flex;
    .type {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 30px;
      color: white;
      background-color: #1da9f5;
      border-radius: 4px;
      margin-right: 20px;
    }
    .circle {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 30px;
      color: #1da9f5;
      background-color: white;
      border: #1da9f5 1px solid;
      border-radius: 4px;
    }
  }
}

.root {
  box-shadow:0 0 40px -10px #3c9afb;
}
</style>
